<template>
  <div class="common-layout">
    <carsTree />
    <div class="content">
      <div class="detail_table">       
        <div class="table_content">
          <!-- <router-view></router-view> -->
          <suerviseMap />
          <tabsTable  />
          <footerInfo />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="Safety">

import tabsTable from '../components/tabsTable.vue'
import carsTree from '../components/carsTree/index.vue'
import suerviseMap from '../components/suerviseMap/indexZ.vue'
import footerInfo from '../components/footer/index.vue'
import { onMounted } from 'vue';



onMounted(()=>{
 var body = document.querySelector('body')
 body.style.overflow = 'hidden';
})
onActivated(()=>{
 var body = document.querySelector('body')
 body.style.overflow = 'hidden';
})
onUnmounted(() => {
  var body = document.querySelector('body')
 body.style.overflow = '';
})
onDeactivated(() => {
  var body = document.querySelector('body')
 body.style.overflow = '';
})
</script>
<style scoped lang="scss">
.common-layout {
  height: 100%;
  display: flex;
  max-height: 100%;

  .content {
    width: 100%;
    height: 100%;
    flex: 1;
  }
}

.detail_table {
  width: 100%;
  height: 100%;

  .table_content {
    width: 100%;
    height: calc(100% - 46px);
    margin: 1px 0px;
    position: relative;
  }
}


</style>
